import { Meta, ColorPalette, ColorItem } from '@storybook/addon-docs/blocks'

import { color } from '../components/shared/styles.tsx'

<Meta title="COLOR /Colors" />

# Colors

<ColorPalette>
  <ColorItem title="theme.color.primary" subtitle="Coral" colors={[color.primary]} />
  <ColorItem title="theme.color.secondary" subtitle="Blue" colors={[color.secondary]} />
  <ColorItem title="theme.color.tertiary" subtitle="Grey" colors={[color.tertiary]} />
  <ColorItem title="theme.color.positive" subtitle="Green" colors={[color.positive]} />
  <ColorItem title="theme.color.warning" subtitle="Ochre" colors={[color.warning]} />
  <ColorItem title="theme.color.negative" subtitle="Red" colors={[color.negative]} />
  <ColorItem title="theme.color.orange" subtitle="Orange" colors={[color.orange]} />
  <ColorItem title="theme.color.gold" subtitle="Gold" colors={[color.gold]} />
  <ColorItem title="theme.color.green" subtitle="Green" colors={[color.green]} />
  <ColorItem title="theme.color.seafoam" subtitle="Seafoam" colors={[color.seafoam]} />
  <ColorItem title="theme.color.purple" subtitle="Purple" colors={[color.purple]} />
  <ColorItem title="theme.color.ultraviolet" subtitle="Ultraviolet" colors={[color.ultraviolet]} />
  <ColorItem
    title="Monochrome"
    colors={[
      color.darkest,
      color.darker,
      color.dark,
      color.mediumdark,
      color.medium,
      color.mediumlight,
      color.light,
      color.lighter,
      color.lightest
    ]}
  />
</ColorPalette>
